<template>
  <div>
    <el-container>
      <el-header style="background-color: white; width: 100%;position: fixed;z-index: 99 ;border-bottom: rgba(99,99,99,0.2) 1px solid">
        <div style="margin: 0 auto;width: 1200px;background-color: white;height: 59px;border-bottom: rgba(99,99,99,0.2) 1px solid">
          <!--            头部的部分-->

          <div style="float: left;display: inline-block">
            <a  href="/index">
              <img  style="height: 30px;margin-top: 13px;" src="http://www.autotianjin.com.cn/i/web/images/logo.png">
            </a>
          </div>
          <div style="margin: 0 auto;display: inline-block;">
            <el-menu
                router
                :default-active="activeIndex"
                     class="el-menu-demo"
                     mode="horizontal">
              <el-menu-item index="/index">首页</el-menu-item>

              <el-menu-item index="/showList">车展购票</el-menu-item>

              <!--submenu子菜单-->
              <!--
                            <el-menu-item index="2"><a  @click="$router.push('/index')" style="margin: 0 20px">2好</a></el-menu-item>

                            &lt;!&ndash; todo 跳转到笔记&ndash;&gt;
                            <el-menu-item index="3" style="margin: 0 20px"><a @click="$router.push('/homepage')" style="text-decoration: none">笔记</a></el-menu-item>
              -->

              <div style="float: right;position: relative;top: 10px;left: 450px">
                <el-input type="text" placeholder="搜索关键字" v-model="search">
                  <!--                  todo 搜索后  根据关键词展示稿件  -->
                  <el-button slot="append" icon="el-icon-search" @click="searchRecipe()"></el-button>
                  <span><a href="javascript:void(0);"></a></span>
                </el-input>
              </div>
            </el-menu>
          </div>

          <!-- 显示当前登录的用户信息 -->
          <div class="login-user" style="float: right;display: inline-block;margin-top:10px;margin-right: 135px">
            <el-dropdown>
              <el-avatar size="medium" :src="admin.avatar"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-custom" @click.native="openManagement()">用户中心</el-dropdown-item>
                <el-dropdown-item icon="el-icon-remove" divided @click.native="logout()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <!--          <div style="float: right;display: inline-block;padding-top:20px;padding-right:5px;margin-left: 0px;"><a href="" style="display: inline-block;
                width: 60px;
                height: 25px;
                text-align: center;
                line-height: 23px;
                background: #FFB31A;
                color: #fff;
                font-size: 14px;
                border-radius: 4px;
                text-decoration: none;">发布</a></div>-->


        </div>
      </el-header>

      <el-main>
        <div id="content" class="clearfix" style="overflow: hidden">
          <div class="person-info clearfix mt30">
            <a href="" style="background-size:cover;" class="person-img left">
              <el-avatar  :size="120" :src="admin.avatar"></el-avatar>
            </a>
            <div class="info left">
              <a class="nickname" href="">{{admin.nickname}}</a>
              <p class="sex"><i class="male"></i> </p>
              <p class="relative point">经验值：
                <a class="point-btn" href="javascript:void(0);">35</a>
              </p>
              <p class="relative point"> IP属地: 天津市
              </p>
              <p class="intro">
                <span></span>
              </p>
            </div>

          </div>
          <div class="type-head clearfix" style="width: 376px;height: 42px">
            <el-menu
                router
                :default-active="activeIndex2"
                     class="el-menu-demo"
                     mode="horizontal" @select="handleSelect" >
              <el-menu-item index="/userManagement/info">个人资料</el-menu-item>
              <el-menu-item index="/userManagement/avatar">头像上传</el-menu-item>
              <el-menu-item index="/userManagement/pwd">密码修改</el-menu-item>
              <el-menu-item index="/userManagement/order">购票记录</el-menu-item>
            </el-menu>
          </div>
        </div>
        <el-scrollbar class="page-scroll" style="height: 380px;">
          <router-view/>
        </el-scrollbar>
      </el-main>
      <el-footer height="200px">
        <el-row style="width: 1200px !important;margin: 0px auto;color:#fff;">
          <el-col :span="13" style="margin-top: 20px">
            <el-row>
              <el-col :span="10">
                <p class="title">主办单位
                  <el-divider></el-divider>
                </p>
                <p>中国汽车流通协会</p>
                <p>百瑞国际会展集团有限公司</p>
                <p>中国国际贸易促进委员会天津市分会</p>
              </el-col>
              <el-col :span="7">
                <p class="title">承办单位<el-divider></el-divider></p>
                <p>天津国际展览有限公司</p>
                <p>北京杜米文化传播有限公司</p>
              </el-col>
              <el-col :span="7">
                <p class="title" style="width: 100px">特别支持单位<el-divider></el-divider></p>
                <p>天津汽车流通协会</p>
              </el-col>
            </el-row>
            <el-row style="font-size: 14px;margin-top: 6px">
              Copyright © 2023 天津浩特瑞展览有限公司津ICP备16007344号-2技术支持：沣泽霖（北京）信息科技有限公司
            </el-row>
          </el-col>
          <el-col :span="4" style="text-align: center;margin-top: 20px">
            <img width="90" src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/code_weixin.jpg" alt="">
            <p>扫一扫关注公众号</p>
          </el-col>
          <el-col :span="5" style="text-align: center;margin-top: 20px">
            <img src="http://www.autotianjin.com.cn/i/web/images/footer_logo.png" width="100%" alt="">
            <p style="font-size: 16px;margin-top: 10px">服务热线</p>
            <p style="font-size: 22px;margin-top: 15px">400-8099-016</p>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>



  </div>
</template>

<!--<script>-->
<!--function pointshow(){-->
<!--  $(".smask").show();-->
<!--  $("#point-box").show();-->
<!--}-->
<!--</script>-->
<!--<script type="text/javascript">(function () {-->
<!--  document.getElementById('___szfw_logo___').oncontextmenu = function () {-->
<!--    return false;-->
<!--  }-->
<!--})();</script>-->
<script>
import global from '../../Global'
let preAdminUrl = global.preAdmins ;
let preResourceUrl = global.preResources ;
export default {
  data() {
    return {
      search:"",
      $:"",
      handleSelect(key, keyPath) {
        //key就是菜单项的index值 keyPath代表点击的菜单项完整路径
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      activeIndex: '/index',
      activeIndex2: '',
      admin:{}
    }


  },
  methods: {
    handleActiveMenuItem(){
      let currentPath=this.$router.currentRoute.path;
      this.activeIndex2=currentPath;
    },
    searchRecipe(){
      // let path = this.$router.currentRoute.path;
      // if (path.startsWith('/sys-admin/product/spu/add-new-')) {
      //   path = '/sys-admin/product/spu/add-new-1';
      // }
     /* this.$router.replace('/');
      this.$router.push("recipe/search?keyword="+this.search);*/
    },
    //登出
    logout(){
      let url = preAdminUrl + "/logout";
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .post(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.$alert("退出成功", '成功', {
            confirmButtonText: '确定',
            callback: action => {
              localStorage.removeItem("localJwt");
              this.$router.push("/webLogin");
            }
          });
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    openManagement(){
      this.$router.push("/userManagement");
    },
    //获取当事人信息
    loadLoginPrincipal(){
      let url = preAdminUrl + "/index";

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.admin = jsonResult.data;
        }else if(jsonResult.state == 40400 || jsonResult.state == 40100 ){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              localStorage.removeItem("localJwt");
              this.$router.push("/webLogin");
            }
          });
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.handleActiveMenuItem();
    this.loadLoginPrincipal();
  }
}
</script>

<style>
body {
  background: #fff;
  color: #333;
  font: 12px Noto Sans,"思源黑体";
  /*padding-top: 60px;*/
}
.fav-fans .text {
  margin-top: 4px;
}
.right {
  float: right;
}
.person-info .fav-fans {
  width: 80px;
  height: 62px;
  padding: 15px 0;
  border-radius: 4px;
  background: #F1F7FA;
  text-align: center;
}
.person-info .fav-fans > div {
  width: 80px;
  border-right: 1px solid #D1DFE6;
}
type-head clearfix{
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
  display: inline-block;
}
.type-head a.active {
  border-bottom: 2px solid #383830;
  font-weight: bold;
  color: #383830;
}
.type-head {
  margin-bottom: 34px;
}
.type-head a {
  display: inline-block;
  float: left;
  color: #383830;
  height: 42px;
  margin: 0px 30px 0px 0px ;
  line-height: 42px;
  font-size: 14px;
}
.person-info .info .point {
  overflow: visible;
}
.person-info .info p {
  margin-top: 11px;
  font-size: 12px;
  line-height: 16px;
  color: #666;
}
.relative {
  position: relative;
}
.male {
  background: url(https://cp1.douguo.com/static/nweb/images/male.png) no-repeat;
  background-size: 100% 100%;
}
.clearfix {
  zoom: 1;
}
element.style {
  background: url(https://tx1.douguo.com/upload/photo/1/1/1/140_bae22c4….png) no-repeat center center;
  background-size: cover;
}

.dgintro .datainfo span {
  font-family: Georgia,"Times New Roman",Times,serif;
  font-size: 24px;
  color: #84b92c;
  line-height: 160%;
}
.dgintro .datainfo p {
  color: #999;
  line-height: 160%;
  padding-top: 20px;
  width: 960px;
  height: 38.4px;
}

.wb100 {
  display: block;
  width: 147px;
  height: 36.75px;
  margin-top: -60px;
}
.fcc {
  font-size: 13px;
  color: #333;
  line-height: 13px;
  padding: 80px 0 10px;
}
.dgintro {
  width: 1000px;
  position: relative;
  height: 188px;
  margin: 0 auto;
  padding-top: 94px;
}
.dginfo {
  background: #f2f2f2;
}
.dgintro h3 {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}
.dgintro ul li {
  width: 92px;
  float: left;
  margin-right: 12px;
  text-align: center;
  height: 116px;
}
.dgintro .threbl {
  width: 312px;
  position: absolute;
  top: 16px;
  left: 690px;
  height: 143.2px;
}
.dgintro h3 {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}
img {
  vertical-align: bottom;
}
.not-menu {
  width: 1000px;
  margin: 80px 0 330px;
  font-size: 13px;
  text-align: center;
}
.person-info .info .sex {
  margin-top: 8px;
}
a {
  color: #333;
  text-decoration: none;
}
.fav-fans .text {
  margin-top: 4px;
}
.fav-fans .count {
  font-size: 15px;
  line-height: 15px;
}
.person-info .fav-fans {
  width: 320px;
  height: 62px;
  padding: 15px 0;
  border-radius: 4px;
  background: #F1F7FA;
  text-align: center;
}
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.person-info {
  margin: 40px 0 20px;
  padding-bottom: 40px;
  padding-top: 60px;
}
.person-info .info .nickname {
  display: inline-block;
  max-width: 296px;
  margin-top: 9px;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}
.person-info i {
  display: inline-block;
  width: 16px;
  height: 18px;
  margin-right: 3px;
  vertical-align: sub;
}
.left {
  float: left;
}
.person-info .info {
  width: 480px;
  position: relative;
}
.clearfix {
  zoom: 1;
}
.person-info .person-img {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}
#content {
  width: 1000px;
  margin: 0 auto;
}
#footer {
  width: 100%;
  margin-top: 30px;
  background: #f8f8f8;
}
#footer .foot {
  width: 1000px;
  margin: 0 auto;
  padding-top: 18px;
}
#footer .clink {
  width: 100%;
  float: left;
  text-align: center;
  margin: 15px 0;
}
.relative {
  position: relative;
}
element.style {
  text-align: center;
}

* {
  box-sizing: border-box;
}

*{margin: 0;
  padding:0
}

a{
  text-decoration: none;
  color: #333333;
}

a:hover{cursor: pointer;
  color: orange;
  text-decoration: none}

.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 49px;
  line-height: 70px;
}

.el-menu-item,.el-submenu__title{
  padding: 0 15px;
}
.el-button{
  padding: 8px 12px;
}
.el-input__inner{
   height: 40px;
   line-height: 20px;
 }


#index_main{margin: 0 auto}
.el-card__body, .el-main{
  padding:0;}
/*#index_footer{height: 398px;background-color: #e8e8e8}*/

.dailyMenu  .title{font-size: 15px;line-height: 35px}
.dailyMenu  .author{font-size: 12px;line-height: 13px}
.othersSearch_topic span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 24px;
  font-size: 12px;
  margin: 12px;
}
.othersSearch_topic span:hover{
  color: orange;
  border: orange 1px solid;
}
.el-aside .follow span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 12px;
}
.el-aside .follow span:hover{
  color: orange;
  border: orange 1px solid;
}
.follow_author{
  font-size: 15px;
}
.follow_fans{
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}
element.style {
  padding: 0;
}
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
.el-main{
  padding: 0;
}
.el-submenu__title{
  padding: 0 5px !important;
}
.el-dropdown-menu__item, .el-menu-item{
  padding: 0 10px !important;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 4px solid #409EFF;
  color: #303133;
}
.el-menu--horizontal>.el-menu-item, .el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 55px !important;
  line-height: 54px;
}
.ctip a{
  display: inline-block;
  width: 95px;
  height: 30px;
}
.ctip span{
  display: inline-block;
  width: 95px;
  height: 30px;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0px;
}
.page-scroll{
  overflow-x: hidden;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #409EFF !important;
  color: #303133;
}

.el-footer{
  margin: 0;
  padding: 0;
  background-color: #242424;
  overflow: hidden;
  text-align: left;
  position: relative;
  bottom: -55px;
}
.el-footer .title{
  width: 80px;
}
.el-footer .title .el-divider{
  background-color: #ffd04b;
  height: 2px;
  margin: 8px 0;
}
.el-footer p{
  margin-top: 6px;
}
</style>

